<template>
	<div>
        <Tree :data="baseData" style="float:left;" @on-select-change="changeCate"></Tree>
		<div style="float:right;width:85%;">
            <Button icon="plus" @click="addData">添加</Button>            
            <Button icon="trash-a" @click="deleSelectData">选中删除</Button>
            <Input v-model="filter.title">
                <Button slot="append" icon="ios-search" @click="search"></Button>
            </Input>
            <Table border ref="selection" :columns="columns1" :data="list" style="margin-top:10px;" @on-selection-change="getIds"></Table>
            <Page :total="filter.total" size="small" show-total show-elevator show-sizer :page-size="2" :page-size-opts="[2,4,6,8]" @on-change="changePage" @on-page-size-change="changePageSize" style="margin-top:15px;"></Page>
        </div>
		<Modal
	        v-model="modal1"
	        title="添加/修改新闻"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        <FormItem label="标题" prop="title">
		            <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
		        </FormItem>
		        <FormItem label="副标题" prop="subhead">
		            <Input v-model="formValidate.subhead" placeholder="请输入副标题"></Input>
		        </FormItem>
		        <FormItem label="作者" prop="author">
		            <Input v-model="formValidate.author" placeholder="请输入作者"></Input>
		        </FormItem>	
		        <FormItem label="新闻内容" prop="content">
		            <quill-editor v-model="formValidate.content" ref="myQuillEditor">
                    </quill-editor>
		        </FormItem>                
		        <FormItem>
		            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
		            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>		            
		        </FormItem>
		    </Form>
	    </Modal>
	</div>
</template>

<script>
	import Base from '../../common/Base.js'
    import { quillEditor } from 'vue-quill-editor'


	export default {
        components: {
            quillEditor
        },        
		mixins:[Base],
		data(){
			return {
                baseData:[],
				module:'news',
				columns1: [
                	{
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title',
                        width:100
                    },
                    {
                        title: '副标题',
                        key: 'subhead',
                        width:100
                    },
                    {
                        title: '作者',
                        key: 'author',
                        width:100
                    },
                    {
                        title: '新闻内容',
                        key: 'content',
                        width:150

                    },
                    {
                        title: '发布时间',
                        key: 'date',
                        width:150
                    }, 
                    {
                        title: '评论数',
                        key: 'cnumber',
                        width:100
                    },                   
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 200,
                        render: (h, params) => {
                            return h('div', [
                            	h('Button', {
                                    props: {
                                        type: 'text',
                                        icon: 'eye'
                                    },
                                    on: {
                                        click: () => { 
                                        	//console.log(params);
                                            this.show(params.index)
                                        }
                                    }     
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        icon: 'edit'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'large',
                                        icon: 'trash-a'
                                    },
                                    on: {
                                        click: () => {
                                        	this.deleData(params.row._id);
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'large',
                                        icon: 'clipboard'
                                    },
                                    on: {
                                        click: () => {
                                            this.commentData(params.row._id);
                                        }
                                    }
                                }, '评论')
                            ]);
                        }
                    }
                ],
                formValidate: {
                    title:'',
                    subhead:'',
                    author:'',
                    content:'',
                    cateId:null,
                    cnumber:0    
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    subhead: [
                        { required: true, message: '副标题不能为空', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '作者不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '新闻内容不能为空', trigger: 'blur' }
                    ]
                    
                }
				
			}
		},
        computed: {
          editor() {
            return this.$refs.myQuillEditor.quill
          }
        },
		methods:{
			show(index){
				this.$Modal.info({
                    title: '新闻信息',
                    content: `标题：${this.list[index].title}<br>副标题：${this.list[index].subhead}<br>作者：${this.list[index].author}<br>新闻内容：${this.list[index].content}<br>发布时间：${this.list[index].date}<br>评论数：${this.list[index].cnumber}<br>`
                })
			},
			ok () {        		
                this.$Message.info('点击了确定');

            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            commentData(id){
                this.newsId = id;
                addCookie('newsId',this.newsId,7);
                parent.location.href='http://localhost:8080/#/comment';
            }
            
		},
        created(){
            this.getTree(2);
            /*this.$http({
                method:'GET',
                url:`http://localhost:3000/comment/list`
            }).then((response)=>{
                console.log(response.data);
            });*/
        }
	}
</script>

<style>
	
</style>